<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        {:build_heading(null,false)}
    </div>
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        {:build_toolbar('refresh')}
                        <button type="button" id="faupload-theme" class="btn btn-danger faupload btn-mini-xs {:$auth->check('ldcms/themes/local')?'':'hide'}"
                                data-url="ldcms/themes/local" data-chunking="false" data-mimetype="zip"
                                data-multiple="false"><i class="fa fa-upload"></i>
                            上传安装
                        </button>
                    </div>
                    <table id="table" class="table table-striped table-hover" width="100%"></table>
                </div>
            </div>

        </div>
    </div>
</div>
<style type="text/css">
    .theme {
        height: 100%;
        position: relative;
        background: #fbfbfb !important;
    }

    .theme > span {
        position: absolute;
        left: 15px;
        top: 15px;
    }

    .theme > img {
        height: 200px;
        object-fit: cover;
        object-position: top center;
    }
</style>

<script id="itemtpl" type="text/html">
    <!--
    如果启用了templateView,默认调用的是itemtpl这个模板，可以通过设置templateFormatter来修改
    在当前模板中可以使用三个变量(item:行数据,i:当前第几行,data:所有的行数据)
    此模板引擎使用的是art-template的native,可参考官方文档
    -->

    <div class="col-sm-4 col-md-3 col-xs-6">
        <!--下面四行是为了展示随机图片和标签，可移除-->
        <div class="thumbnail theme">
            <% if(item.install==1) {%>
            <span class="btn btn-success"> <i class="fa fa-check-circle"></i> 已安装</span>
            <% }else{%>
            <span class="btn btn-default"> <i class="fa fa-ban"></i> 未安装</span>
            <%}%>
            <img src="<%=item.thumb%>" style="width:100%;" alt="<%=item.title%>">
            <div class="caption">
                <h4><%=item.title?item.title:'无'%></h4>
                <p class="text-muted">作者:<%=item.author%></p>
                <p style="padding: 0;margin: 0">
                    <!--详情的事件需要在JS中手动绑定-->
                    <% if(item.install==1) {%>
                    <% if(item.state==1){%>
                    <a href="#" class="btn btn-info" disabled="disabled"><i class="fa fa-check-circle"></i> 已启用 |
                        <%=item.lang_text%> </a>
                    <a href="{:url('ldcms/themes/download')}?name=<%=item.name%>&lg=<%=item.lang%>"
                       class="btn btn-primary"> <i class="fa fa-download"></i> 下载备份</a>
                    <%}else{%>
                    <a href="ldcms/themes/enable?name=<%=item.name%>&title=<%=item.title%>&is_testdata=<%=item.is_testdata%>"
                       class="btn btn-success btn-dialog"
                       data-url="ldcms/themes/enable?name=<%=item.name%>&title=<%=item.title%>&is_testdata=<%=item.is_testdata%>"
                       data-title="启用当前模板"><i class="fa fa-check-circle"></i> 启用 </a>
                    <%}%>
                    <% }else{%>
                    <a href="ldcms/themes/install?name=<%=item.name%>" class="btn btn-danger btn-ajax"
                       data-refresh="true" data-table-id="table"><i class="fa fa-cloud-upload"></i> 安装 </a>
                    <%}%>
                </p>
            </div>
        </div>
    </div>
</script>